<template>
  <div class="NewsConfig">
    <div class="newsList" v-if="showNewsList">
      <div class="title">行业动态列表</div>
      <div class="addBtn">
        <el-button type="primary" @click="addNewone">新增</el-button>
      </div>
      <div class="area">
        <div class="item" v-for="(item,index) in newsList " :key="index">
          <img :src="item.bgUrl" alt />
          <div class="title">{{item.title}}</div>
          <div class="content" v-html="formatContent(item.content)"></div>
          <div class="desc">
            <span>发布时间: {{ item.add_time }}</span>
          </div>
          <div class="tool">
            <span class="del" @click="toDel(item)">删除</span>
            <span class="edit" @click="toEdit(item)">编辑</span>
          </div>
        </div>
        <div class="tips" v-if="newsList.length == 0">暂无列表数据</div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 15, 20, 25,30,35]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <div class="publish" v-if="!showNewsList">
      <div class="title">{{editMode ? '行业动态编辑页' : '行业动态发布页'}}</div>
      <div class="backBtn">
        <el-button type="primary" @click="back">返回</el-button>
      </div>
      <div class="item">
        <div class="left">文章标题:</div>
        <div class="right">
          <el-input class="elinput" v-model="form.title" placeholder="请输入文章标题"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="left">文章图片:</div>
        <div class="right rightUpload">
          <el-input class="elinput" v-model="form.bgUrl" placeholder="请输入图片链接地址"></el-input>
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>
      <div class="item">
        <div class="left">详情内容:</div>
        <div class="right">
          <EditorTool ref="editor" />
        </div>
      </div>
      <div class="tool">
        <el-button type="primary" class="savebtn" @click="addNews">{{editMode ? '修改' : '保存'}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsList, deleteNews, addNews } from "@/api/configApi.js";
import { uploadUrl } from "@/utils/tool";
import EditorTool from "@/components/EditorTool";
export default {
  name: "NewsConfig",
  components: {
    EditorTool
  },
  data() {
    return {
      showNewsList: true, //展示动态列表
      editMode: false, //编辑模式

      currentPage: 1,
      pageSize: 15,
      total: 0,

      uploadUrl,
      newsList: [],
      form: {
        title: "", //文章标题
        bgUrl: "", //文章图片链接
        content: "" //富文本内容
      },
      articleTitle: ""
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial(page) {
      let result = await getNewsList({
        pageSize: this.pageSize,
        page: this.currentPage
      });
      if (result.code == 200) {
        this.newsList = result.data.data;
        this.total = result.data.total;
      }
    },
    handleCurrentChange() {
      this.initial();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initial();
    },
    formatContent(html) {
      var textContent = this.htmlToText(html);
      return textContent.slice(0, 40) + "...";
    },
    htmlToText(htmlString) {
      var tempDiv = document.createElement("div");
      tempDiv.innerHTML = htmlString;
      return tempDiv.textContent || tempDiv.innerText || "";
    },
    toEdit(item) {
      this.showNewsList = false;
      this.editMode = true;
      this.form = item;
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.editor.setHtml(item.content);
        });
      }, 0);
    },
    addNewone() {
      this.showNewsList = false;
      this.editMode = false;
      this.form = {
        title: "", //文章标题
        bgUrl: "", //文章图片链接
        content: "" //富文本内容
      };
    },
    toDel(item) {
      this.$confirm("确定要删除此动态吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let result = await deleteNews({ id: item.id });
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.initial();
          }
        })
        .catch(() => {});
    },
    back() {
      //返回时候重置数据
      this.showNewsList = true;
      this.editMode = false;
      this.form = {
        title: "", //文章标题
        bgUrl: "", //文章图片链接
        content: "" //富文本内容
      };
    },
    //保存或编辑行业动态
    async addNews() {
      if (!this.form.title) {
        this.$message.error("文章标题不能为空!");
        return;
      }
      if (!this.form.bgUrl) {
        this.$message.error("文章图片不能为空!");
        return;
      }
      let html = this.$refs.editor.getHtml();
      if (html == "<p><br></p>") {
        this.$message.error("文章内容不能为空!");
        return;
      }
      this.form.content = html;
      let result = await addNews(this.form);
      if (result.code == 200) {
        this.$message.success("发布成功!");
        this.initial();
        setTimeout(() => {
          this.showNewsList = true;
        }, 1000);
      }
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.form.bgUrl = res.data.url;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.NewsConfig {
  // min-height: 100vh;
  .newsList {
    width: 100%;
    height: 100%;
    position: relative;
    .addBtn {
      position: absolute;
      top: 10px;
      right: 30px;
    }
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
    }
    .area {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      height: calc(100vh - 100px);
      overflow: auto;
      .tips {
        width: 100%;
        height: calc(100vh - 60px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .item {
        // height: 350px;
        width: 23.5%;
        margin: 10px;
        border-radius: 10px;
        box-shadow: 0px 10px 20px 2px rgb(129 125 125 / 40%);
        padding: 10px;
        box-sizing: border-box;
        transition: all 0.5s;
        img {
          width: 100%;
          height: 200px;
        }
        .title {
          font-size: 18px;
          padding: 5px 0;
          white-space: nowrap;
          overflow: hidden;
        }
        .desc {
          color: #ababab;
          font-size: 14px;
          margin-top: 10px;
        }
        .tool {
          text-align: right;
          // padding: 5px;
          span {
            cursor: pointer;
          }
          .del {
            color: $pink;
            margin-right: 20px;
          }
          .edit {
            color: $primaryColor;
          }
        }
        &:hover {
          box-shadow: 0px 10px 20px 10px rgb(129 125 125 / 40%);
        }
      }
    }
  }
  .publish {
    width: 100%;
    height: 100%;
    position: relative;
    .backBtn {
      position: absolute;
      top: 10px;
      right: 30px;
    }
    .tool {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      .savebtn {
        width: 200px;
      }
    }

    .item {
      display: flex;
      padding: 10px;
      box-sizing: border-box;

      .left {
        width: 100px;
        font-weight: bold;
      }
      .right {
        flex: 1;

        .elinput {
          width: 400px;
        }
      }
      .rightUpload {
        display: flex;
        align-items: center;
        width: 400px;
        .elinput {
          width: 300px;
          margin-right: 20px;
        }
      }
    }
  }
  .title {
    text-align: center;
    padding: 10px 0;
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
